/**
 * Create a chart option
 * @param {String} title Title
 * @param {String} yAxisName Name of the y-axis
 * @return {object} chart option
 */
function getBoxPlotOption(title, yAxisName, xData, yData, min, max) {
    return {
        title: [
            {
                text: title,
                left: 'center'
            },
        ],
        dataset: [
            {
                source: yData,
            },
            {
                transform: {
                    type: 'boxplot',
                    config: {
                        itemNameFormatter: function (params) {
                            label = xData;
                            return label[params.value];
                        },
                    }
                }
            },
            {
                fromDatasetIndex: 1,
                fromTransformResult: 1
            }
        ],
        tooltip: {
            trigger: 'item',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '10%',
            right: '10%',
            bottom: '15%'
        },
        xAxis: {
            type: 'category',
            boundaryGap: true,
            nameGap: 10,
            splitArea: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            name: yAxisName,
            min: min,
            max: max,
            splitLine: {
                show: false
            },
        },
        series: [
            {
                name: 'boxplot',
                type: 'boxplot',
                datasetIndex: 1,
                markLine: {
                    symbol: 'none', label: { show: true }, lineStyle: { color: 'red' },
                    data: [{ yAxis: -0.083 }, { yAxis: 1.416 }]
                },
            },
            {
                name: 'outlier',
                type: 'scatter',
                datasetIndex: 2,
                itemStyle: {
                    color: function (params) {
                        return 'red';
                    },
                    // emphasis: {
                    //     itemStyle: {
                    //         // 这里可以设置离群点的颜色、大小等属性，例如：  
                    //         color: '#FF0000' // 所有离群点设置为红色  
                    //     }
                    // }
                }
            }
        ],
    };
}

/**
 * Get a line chart option
 * @param {string} title The title of the chart
 * @param {string} yAxisName y-axis name
 * @param {Array} xData x-axis labels
 * @param {Array} yData points value
 * @param {number} min minimum value of y-axis
 * @param {number} max maximum value of y-axis
 * @returns option object that indicates the line chart
 */
function getLinePlotOption(title, yAxisName, xData, yData, min, max, lowLimit, topLimit) {
    return {
        title: [
            {
                text: title,
                left: 'center'
            },
        ],
        xAxis: {
            type: 'category',
            data: xData,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
        },
        yAxis: {
            type: 'value',
            name: yAxisName,
            min: min,
            max: max,
            splitLine: {
                show: false
            },
        },
        series: [
            {
                data: yData,
                type: 'line',
                label: {
                    show: true,
                    position: 'top',
                    formatter: '{c}'
                },
                markLine: {
                    symbol: 'none', label: { show: true }, lineStyle: { color: 'red' },
                    data: [{ yAxis: lowLimit }, { yAxis: topLimit }]
                }
            }
        ],
        update: (xAxisData, yAxisData) => {
            this.xAxis.data = xAxisData;
            this.series[0].data = yAxisData;
        },
        grid: {
            left: '10%',
            right: '10%',
            bottom: '15%'
        },
    }
}